<template>
  <div class="table-box w-1/1 h-1/1 bg-[#fff] p-30px overflow-scroll">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="bg-[var(--el-color-info-light-9)]">
          <div class="p-20px box-border">
            <div class="text-center font-bold text-[32px]">{{ getDays(userDetail!.create_time) }}</div>
            <div class="text-center text-[14px] mt-10px">客户诞生距今</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg-[var(--el-color-info-light-9)]">
          <div class="p-20px box-border">
            <div class="text-center font-bold text-[32px]">{{ userDetail.use_times }}</div>
            <div class="text-center text-[14px] mt-10px">使用产品/次</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg-[var(--el-color-info-light-9)]">
          <div class="p-20px box-border">
            <div class="text-center font-bold text-[32px]">{{ getProtectDay(userDetail.protect_times) }}</div>
            <div class="text-center text-[14px] mt-10px">客户跟进保护期</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg-[var(--el-color-info-light-9)]">
          <div class="p-20px box-border">
            <div class="text-center font-bold text-[32px]">{{ userDetail.follow_times }}</div>
            <div class="text-center text-[14px] mt-10px">历史跟进管家/人次</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="mt-30px py-20px border-b border-[var(--el-color-info-light-3)]">
      <p class="text-[20px] font-bold">客户信息</p>
      <el-row class="text-[14px] mt-0px">
        <el-col :span="6" class="mt-30px"><span class="mr-20px">客户姓名:</span>{{ getZiLiao(userDetail.username) }}</el-col>
        <el-col :span="6" class="mt-30px"
          ><span class="mr-20px">客户登记:</span><span v-show="userDetail.level !== 'F'">{{ userDetail.level }}级</span
          ><span v-show="userDetail.level === 'F'">未评级</span></el-col
        >
        <el-col :span="6" class="mt-30px"><span class="mr-20px">当前服务管家:</span>{{ userDetail.now_broker }}</el-col>
        <el-col :span="6" class="mt-30px"
          ><span class="mr-20px">首次录入时间:</span>{{ getZiLiao(userDetail.create_time) }}</el-col
        >
        <el-col :span="6" class="mt-30px"><span class="mr-20px">联系方式:</span>{{ userDetail.phone }}</el-col>
        <el-col :span="6" class="mt-30px"
          ><span class="mr-20px">已验证/未验证:</span><span v-show="userDetail.valid === 1">已验证</span
          ><span v-show="userDetail.valid === 0">未验证</span></el-col
        >
        <el-col :span="6" class="mt-30px"><span class="mr-20px">客户来源:</span>{{ userDetail.clue_list[0].origin_name }}</el-col>
        <el-col :span="6" class="mt-30px"
          ><span class="mr-20px">最新录入时间:</span>{{ getZiLiao(userDetail.newest_follow_time) }}</el-col
        >
      </el-row>
    </div>
    <div class="mt-30px py-20px border-b border-[var(--el-color-info-light-3)]">
      <p class="text-[20px] font-bold">客户轨迹</p>
      <div class="mt-30px max-h-[700px] overflow-y-auto p-[10px]">
        <el-timeline>
          <el-timeline-item v-for="p in userDetail.clue_list" :key="p.id" :hollow="true" type="primary" size="large">
            <el-row>
              <el-col :span="1.5" class="mr-20px">{{ userDetail.city }}</el-col>
              <el-col :span="18">
                <div>{{ dayjs(p.create_time).format("YYYY-MM-DD HH:mm:ss") }}</div>
                <div>
                  <div v-if="p.phone_record.clue_id === 0">
                    该客户使用过{ <span class="font-bold">{{ p.origin_name }}</span
                    ><span class="mx-5px"
                      ><span>{{ p.lou_pan_id === 0 ? "浏览页面" : "意向楼盘" }}:</span
                      >{{ p.lou_name ? p.lou_name : "公共页面" }}</span
                    ><span class="mx-5px">意向区域:</span>{{ p.region_name ? p.region_name : "无" }}}
                  </div>
                  <div class="" v-if="p.reservation.clue_id !== 0">
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#95d475] p-[3px] text-[#000] inline-block w-[78px]">上车地点：</span>
                      <span>{{ p.reservation.address }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#95d475] p-[3px] text-[#000] inline-block w-[78px]">接送方式：</span>
                      <span>{{ p.reservation.look_type }}</span>
                    </div>
                    <div v-show="p.reservation.adult !== 0">
                      <span class="mr-[5px] mt-[5px] bg-[#95d475] p-[3px] text-[#000] inline-block w-[78px]">接送人数：</span>
                      <span class="mr-[5px]">成人x{{ p.reservation.adult }}</span>
                      <span class="mr-[5px]">儿童x{{ p.reservation.children }}</span>
                      <span>婴儿x{{ p.reservation.baby }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#95d475] p-[3px] text-[#000] inline-block w-[78px]">经纬度：</span>
                      <span>{{ p.reservation.lat_lng }}</span>
                    </div>
                  </div>
                  <div v-else-if="p.phone_record.clue_id !== 0" class="mt-20px">
                    <el-descriptions direction="vertical" :column="8" :border="true">
                      <el-descriptions-item label="楼盘区域" min-width="180">{{
                        p.region_name ? p.region_name : "无"
                      }}</el-descriptions-item>
                      <el-descriptions-item label="拨打楼盘" min-width="100" align="center">{{
                        p.lou_name ? p.lou_name : "公共页面"
                      }}</el-descriptions-item>
                      <el-descriptions-item label="拨入时间" min-width="180" align="center">{{
                        p.phone_record.startTime
                      }}</el-descriptions-item>
                      <el-descriptions-item label="结束时间" min-width="180" align="center">{{
                        p.phone_record.endTime
                      }}</el-descriptions-item>
                      <el-descriptions-item label="接听状态" min-width="100" align="center">接通</el-descriptions-item>
                      <el-descriptions-item label="通话时长" min-width="100" align="center"
                        >{{ p.phone_record.duration }}秒</el-descriptions-item
                      >
                      <el-descriptions-item label="录音试听" min-width="100" align="center">
                        <span
                          class="text-[var(--el-color-primary-light-1)] cursor-pointer"
                          @click="tryListen(p.phone_record.recordUrl)"
                          >试听</span
                        >
                      </el-descriptions-item>
                      <el-descriptions-item label="归属地" min-width="150" align="center">{{
                        p.phone_record.city
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                  <div v-else-if="p.help_select.clue_id !== 0">
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">现楼交付：</span>
                      <span>{{ p.help_select.delivery_type }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">楼盘类型：</span>
                      <span>{{ p.help_select.lou_type }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">户型：</span>
                      <span>{{ p.help_select.room_type }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">面积：</span>
                      <span>{{ p.help_select.area }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">装修：</span>
                      <span>{{ p.help_select.furnish }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">购房目的：</span>
                      <span>{{ p.help_select.objective }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">期望区域：</span>
                      <span>{{ p.help_select.region_name }}</span>
                    </div>
                    <div>
                      <span class="mr-[5px] mt-[5px] bg-[#eebe77] p-[3px] text-[#000] inline-block w-[78px]">预算：</span>
                      <span>{{ p.help_select.budget }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div class="mt-30px py-20px border-b border-[var(--el-color-info-light-3)]">
      <p class="text-[20px] font-bold">管家服务记录</p>
      <div class="mt-30px max-h-[700px] overflow-y-auto p-[10px]">
        <el-timeline>
          <el-timeline-item v-for="p in userDetail.follow_list.reverse()" :key="p.id" :hollow="true" type="primary" size="large">
            <el-row>
              <el-col :span="1">中山</el-col>
              <el-col :span="12">
                <div>{{ dayjs(p.record_time).format("YYYY-MM-DD HH:mm:ss") }}</div>
                <div>{{ p.cont }}</div>
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <el-dialog width="400" v-model="visible" title="录音试听" @close="stopAudio">
      <div class="flex flex-row justify-center">
        <audio controls :src="nowLink" ref="auRef"></audio>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, onBeforeMount } from "vue";
import { getUserInfo } from "@/api/modules/myUser";
import { useRoute } from "vue-router";
import dayjs from "dayjs";

const route = useRoute();

interface UserDetail {
  city: string;
  clue_list: any;
  first_in_time: "";
  create_time: number;
  follow_times: number;
  follow_list: any;
  level: string;
  newest_follow_time: string;
  now_broker: string;
  phone: string;
  use_times: number;
  protect_times: number;
  username: string;
  valid: number;
}

const userDetail = ref<UserDetail>({
  city: "",
  clue_list: [{ origin_name: "", reservation: { clue_id: 0 }, help_select: { clue_id: 0 }, phone_record: { clue_id: 0 } }],
  first_in_time: "",
  create_time: 0,
  follow_times: 0,
  follow_list: [],
  level: "",
  newest_follow_time: "",
  now_broker: "",
  phone: "",
  use_times: 0,
  protect_times: 0,
  username: "",
  valid: 0
});

const getInfo = async () => {
  const id = parseInt(route.query.id as string);
  const { data } = await getUserInfo({ id });
  userDetail.value = data as any;
};

// 获取客户诞生天数
const getDays = (new_time: number) => {
  const time = new Date().getTime() / 1000 - dayjs(new_time).unix();
  if (time / 3600 < 24 && time / 3600 >= 1) {
    return `${Math.floor(time / 3600)}小时`;
  } else if (time / 60 < 60 && time / 60 >= 1) {
    return `${Math.floor(time / 60)}分钟`;
  } else if (time / 60 < 1 && time / 60 > 0) {
    return `${time}秒`;
  } else if (time / 3600 >= 24) {
    return `${Math.floor(time / 3600 / 24)}天`;
  } else {
    return "暂无";
  }
};

// 获取保护天数
const getProtectDay = (pd: any) => {
  if (pd) {
    const restTime = dayjs(pd).unix() - new Date().getTime() / 1000;
    const absRestTime = Math.floor(Math.abs(restTime));
    if (restTime < 0) {
      return "暂无";
    } else {
      if (absRestTime < 24 * 3600) {
        return "不足1天";
      } else {
        return `${Math.ceil(absRestTime / (3600 * 24))}`;
      }
    }
    return absRestTime;
  } else {
    return "暂无";
  }
};

const getZiLiao = (data: any) => {
  if (typeof data === "string") {
    return data === "" ? "无" : data;
  } else if (typeof data === "number") {
    return data === 0 ? "无" : data;
  }
};

const visible = ref(false);
const nowLink = ref("");
const auRef = ref();
const tryListen = (link: string) => {
  visible.value = true;
  nowLink.value = link;
};
const stopAudio = () => {
  nextTick(() => {
    auRef.value.pause();
    nowLink.value = "";
  });
};
// const serverList = [
//   { id: 1, create_time: "2023-06-20 10:54:12", cont: "【梁懿衡】修改客户资料" },
//   {
//     id: 2,
//     create_time: "2023-06-20 12:20:30",
//     cont: "【梁懿衡】客户等级由未评级转为D级阿克苏打卡上看到卡卡斯蒂卡是空的D级阿克苏打卡上看到卡卡斯蒂卡是空的D级阿克苏打卡上看到卡卡斯蒂卡是空的D级阿克苏打卡上看到卡卡斯蒂卡是空的D级阿克苏打卡上看到卡卡斯蒂卡是空的D级阿克苏打卡上看到卡卡斯蒂卡是空的"
//   }
// ];

onBeforeMount(() => {
  Promise.all([getInfo()]);
});
</script>

<style></style>
